import { Icon } from "@ant-design/compatible";
import { Button, Form, Input, message } from "antd";
import React from "react";
import { Redirect } from "react-router-dom";
import { LoginAdmin } from "./../../api/login";
import "./login.css";

class Login extends React.Component {
  formRef = React.createRef();

  handleSubmit = () => {
    let that = this;
    const form = this.formRef.current;
    form.validateFields().then((values) => {
      console.log(values);
      LoginAdmin(values).then((res) => {
        console.log(res);
        message.success("登录成功");
        window.localStorage.setItem("token", res.token);
        that.props.history.push("/");
      });
      // if (values.username === "admin" && values.password === "admin123") {
      //   window.localStorage.setItem("loggedIn", true);
      //   this.props.history.push("/");
      // } else {
      //   message.error("账号或密码错误", 1);
      // }
    });
  };
  render() {
    const loggedIn = window.localStorage.getItem("token");
    const LoginForm = (
      <div className="login-container">
        <Form
          onFinish={this.handleSubmit}
          className="login-form"
          ref={this.formRef}
        >
          {/* <div className="app-title">管理系统</div> */}
          <div className="sub-title">管理系统·管理员登录</div>
          <Form.Item name="account">
            <Input
              prefix={<Icon type="user" className="login-icon" />}
              placeholder="用户名admin"
            ></Input>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入密码!" }]}
          >
            <Input
              prefix={<Icon type="lock" className="login-icon" />}
              type="password"
              placeholder="密码admin123"
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
    return loggedIn ? <Redirect to="/" /> : LoginForm;
  }
}

// const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(Login);
// export default WrappedNormalLoginForm;

export default Login;
